<template>
    <RouterView />
    <audio ref="audioRef" :src="audioUrl" loop></audio>
    <img
        class="music-btn"
        ref="playerRef"
        :class="{ playing: musicFlag }"
        @click="hdlChangePlayerStatus"
        src="@/assets/on.png"
    />
</template>

<script setup lang="ts">
    import wx from "weixin-js-sdk";
    import audioUrl from "./assets/kouh5.mp3";
    const playerRef = ref();
    const audioRef = ref();
    const musicFlag = ref(false);
    onMounted(() => {
        audioRef.value.play();

        wx.ready(function () {
            if (audioRef.value.paused) {
                audioRef.value.play();
            }
        });

        document.addEventListener(
            "WeixinJSBridgeReady",
            function () {
                if (audioRef.value.paused) {
                    audioRef.value.play();
                }
            },
            false,
        );

        audioRef.value.addEventListener("play", () => {
            musicFlag.value = true;
            document.removeEventListener("click", play);
        });
        audioRef.value.addEventListener("pause", () => {
            musicFlag.value = false;
        });

        const play = () => {
            if (audioRef.value.paused) {
                audioRef.value.play();
            }
        };
        document.addEventListener("click", play);
    });
    const hdlChangePlayerStatus = () => {
        if (audioRef.value.paused) {
            audioRef.value.play();
        } else {
            audioRef.value.pause();
        }
    };
</script>

<style lang="scss">
    html {
        margin: auto;
        max-width: $maxWidth;
        height: 100%;
        // font-size: 100vw;
        font-size: 10vw;
        font-family: -apple-system, system-ui, BlinkMacSystemFont,
            Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
            Arial, sans-serif;
        background: #f00;

        @include MaxWidth() {
            font-size: calc((#{$maxWidth} - 17px) / 10);
        }
    }
    body {
        margin: auto;
        max-width: $maxWidth;
        height: 100%;
        font-size: 16px;
        -webkit-text-size-adjust: none !important;
    }

    code {
        font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
            monospace;
    }

    #app {
        height: 100%;
        background: #00f;
    }

    .music-btn {
        width: 54px;
        height: 54px;
        position: fixed;
        z-index: 99999;
        right: 30px;
        top: 20px;
        animation: around 3000ms linear 0s infinite forwards;
        animation-play-state: paused;
        &.playing {
            animation-play-state: running;
        }
        @include MaxWidth {
            right: calc((100vw - $maxWidth) / 2 + 15px);
        }
    }

    @keyframes around {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>
